<template>
  <div>
    <el-button
      class="addBtn"
      round
      v-show="this.activeName == 'second'"
      @click="handleAddAgency"
      >添加代理</el-button
    >
    <el-tabs
      v-model="activeName"
      @tab-click="handleAgencyToggle"
      class="tabs_bgc"
    >
      <el-tab-pane label="代理级别设置" name="first">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableList1"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="状态" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="代理管理" name="second">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableList2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="状态" align="center">
            123
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <div class="table_column_last">
              <span>编辑</span>
              <span @click="handleSetProduct">设置产品分成</span>
            </div>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 按钮-添加代理--模态框 -->
    <el-dialog
      title="添加代理商"
      :visible.sync="dialogAgency"
      :center="false"
      :close-on-press-escape="true"
      :show-close="false"
    >
      <!-- 分割线 -->
      <div style="width: 100%; height: 1px; background: #ccc"></div>

      <el-form
        class="formStyle"
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="名称"> </el-form-item>

        <el-form-item label="负责区域">
          <el-select v-model="m_Area" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="有效期至">
          <el-date-picker v-model="m_Data" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            :autosize="autoSize"
            v-model="formVal"
            maxlength="60"
            size="mini"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogAgency = false"
          >确 定</el-button
        >
        <el-button @click="dialogAgency = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 按钮-设置产品分成--模态框 -->
    <el-dialog
      title="编辑提成级别"
      :visible.sync="dialogProduct"
      :center="false"
      :close-on-press-escape="true"
      :show-close="false"
    >
      <!-- 分割线 -->
      <div style="width: 100%; height: 1px; background: #ccc"></div>

      <el-form
        class="formStyle"
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="代理级别" hide-required-asterisk="true">
          <el-input
            type="text"
            placeholder="输入"
            v-model="resellerLev"
            maxlength="10"
            show-word-limit
            style="width: 250px"
            :required="true"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="默认提成比例"
          label-width="100px"
          hide-required-asterisk="true"
        >
          <el-input
            v-model="input"
            placeholder="只支持数字和小数点"
            style="width: 250px"
          ></el-input>
          %
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="m_Area" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogProduct = false"
          >确 定</el-button
        >
        <el-button @click="dialogProduct = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      m_Area: null, // 表单form--负责区域
      m_Data: null, // 表单form--有效期至
      autoSize: { minRows: 5 }, // 表单form--调整表单文本高度
      formVal: "", // 表单form--备注
      resellerLev: "", //表单form--代理级别
      dialogProduct: false, // 触发模态框--设置产品分成按钮
      dialogAgency: false, // 触发模态框--添加代理按钮
      activeName: "second",
      // 列表
      tableList1: [
        { prop: "reseller", label: "代理级别", width: "180" },
        { prop: "proportion", label: "分成比例", width: "180" },
        { prop: "people", label: "人数" },
        { prop: "updatetime", label: "更新时间" },
      ],
      tableList2: [
        { prop: "reseller", label: "代理级别", width: "180" },
        { prop: "name", label: "名称" },
        { prop: "telphone", label: "手机号码" },
        { prop: "proportion", label: "默认分成比例" },
        { prop: "monthdivide", label: "本月分成" },
        { prop: "subordinate", label: "直属下级数" },
        { prop: "validdata", label: "有效期至" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    handleAgencyToggle() {
      console.log(1);
    },
    // 按钮-添加代理
    handleAddAgency() {
      this.dialogAgency = true;
    },
    // 按钮-设置产品分成
    handleSetProduct() {
      this.dialogProduct = true;
    },
  },
};
</script>

<style lang="scss" scoped>
$myColor: #d7152d;

.addBtn {
  position: absolute;
  right: 40px;
  top: 25px;
  z-index: 999;
  background: $myColor;
  color: #fff;
}

.tabs_bgc {
  padding: 20px 0 0 20px;
  box-sizing: border-box;
  background: #fff;
  .table_column_last {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
  }
}

.formStyle {
  margin-top: 10px;
}
</style>